<template>
  <div class="shoucang_content">
    <van-nav-bar title="我的收藏" left-arrow @click-left="onClickLeft" />
    <div v-if="!shoucang.length" class="shoucang_icon">
      <div>
        <img src="/wode_images/shoucang/uncollect.png">
        <p>没有收藏</p>
      </div>

    </div>
    <div v-else>
      <div class="shoucang_item" v-for="(item,index) of shoucang" :key="index">
        <van-card class="shoucang_card" :price="item.boyu_qhprice" :desc="item.boyu_qhintroduce" :title="item.boyu_qstore" :thumb="item.boyu_qhphoto">
          <template #tags>
            <van-tag plain type="danger">{{item.boyu_quantity}}</van-tag>
            <van-tag plain type="danger">{{item.boyu_qarea}}</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="quxiao(item.boyu_quid)">取消收藏</van-button>
            <van-button size="mini">预约看房</van-button>
          </template>
        </van-card>
      </div>
    </div>

    <!-- <div class="shoucang_item">
      <van-card class="shoucang_card"
        price="1630 - 2090元/月"
        desc="北欧极简大单间"
        title="CCB建融家园|泊寓(澳门路店)"
        thumb="http://vky-oss.inboyu.com/upload/39f6bae2-a58a-33aa-6cb8-55985c6d2c4e.jpg?x-oss-process=image/resize,w_240,h_180"
      >
        <template #tags>
          <van-tag plain type="danger">一室零厅一卫</van-tag>
          <van-tag plain type="danger">14.22 - 22.88 ㎡</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">取消收藏</van-button>
          <van-button size="mini">预约看房</van-button>
        </template>
      </van-card>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      shoucang: []
    };
  },
  mounted() {
    this.axios.get("/shoucang").then(res => {
      console.log(res.data.results);
      this.shoucang = res.data.results;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push("/wode");
    },
    quxiao(hid) {
      this.axios
        .get("/quxiao", {
          params: {
            boyu_hid: hid
          }
        })
        .then(res => {
          window.history.go(0);
        });
    }
  }
};
</script>
<style>
.shoucang_icon {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shoucang_icon p{
  text-align: center
}
.shoucang_item {
  width: 95%;
  margin: 0 auto;
}
.shoucang_item .shoucang_card {
  border-radius: 10px;
  box-shadow: 1px 1px 2px 1px #888888;
  margin: 10px 0;
}

.shoucang_content .van-hairline--bottom::after {
  border-bottom-width: 0;
}
.shoucang_content .van-button--mini {
  height: 26px;
  padding: 0 10px;
  margin: 5px 5px;
  border-radius: 12px;
  box-shadow: 0 0 1px 1px #888888;
}
</style>